<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>找回密码</title>
	<!-- 引入Pacifico字体（Google Fonts） -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<style>
		/* 全局样式重置与基础设置 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Pacifico', cursive;
		}

		body {
			/* 水墨宣纸背景：底色+淡墨纹理+晕染效果 */
			background-color: #f5f1e6;
			background-image:
				/* 宣纸纤维纹理 */
					url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238c877d' fill-opacity='0.06'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464 1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
						/* 淡墨渐变晕染 */
					linear-gradient(45deg, rgba(139, 134, 123, 0.03) 0%, rgba(245, 241, 230, 0) 100%);
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/* 表单容器：水墨卷轴卡片效果 */
		.pwd-form-container {
			width: 32%;
			min-width: 300px;
			padding: 45px 35px;
			background-color: rgba(255, 255, 255, 0.85);
			border: 1px solid #d4d0c8;
			border-radius: 6px;
			/* 水墨晕染阴影：模拟宣纸透墨效果 */
			box-shadow:
					0 8px 24px rgba(139, 134, 123, 0.08),
					0 0 1px rgba(107, 102, 93, 0.1) inset;
			position: relative;
		}

		/* 容器顶部水墨线条装饰 */
		.pwd-form-container::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: linear-gradient(90deg, transparent, #8c877d, transparent);
		}

		/* 标题样式：水墨书法感 */
		.pwd-form-container h3 {
			color: #3a362e;
			font-size: 28px;
			text-align: center;
			margin-bottom: 35px;
			position: relative;
			letter-spacing: 1.5px;
		}

		/* 标题下方短横线：模拟毛笔落款线条 */
		.pwd-form-container h3::after {
			content: "";
			position: absolute;
			bottom: -12px;
			left: 50%;
			transform: translateX(-50%);
			width: 50px;
			height: 1px;
			background-color: #8c877d;
		}

		/* 表单样式：纵向排列+居中 */
		.forgot-pwd-form {
			display: flex;
			flex-direction: column;
			gap: 22px;
			align-items: center;
		}

		/* 输入框样式：水墨边框+宣纸底色 */
		.forgot-pwd-form input[type="text"] {
			width: 240px;
			height: 42px;
			padding: 0 15px;
			background-color: #f5f1e6;
			border: 1px solid #b8b2a6;
			border-radius: 4px;
			color: #3a362e;
			font-size: 16px;
			transition: all 0.3s ease;
		}

		/* 输入框聚焦：水墨边框加深 */
		.forgot-pwd-form input[type="text"]:focus {
			outline: none;
			border-color: #8c877d;
			box-shadow: 0 0 0 2px rgba(139, 134, 123, 0.08);
			background-color: #f9f6ee;
		}

		/* 按钮样式：墨色按钮+古典 hover 效果 */
		.forgot-pwd-form input[type="submit"] {
			width: 240px;
			height: 44px;
			background-color: #3a362e;
			color: #f5f1e6;
			border: none;
			border-radius: 4px;
			font-size: 18px;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
		}

		/* 按钮 hover 水墨流动效果 */
		.forgot-pwd-form input[type="submit"]::after {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(245, 241, 230, 0.15), transparent);
			transition: left 0.6s ease;
		}

		.forgot-pwd-form input[type="submit"]:hover {
			background-color: #4d483f;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(139, 134, 123, 0.1);
		}

		.forgot-pwd-form input[type="submit"]:hover::after {
			left: 100%;
		}

		.forgot-pwd-form input[type="submit"]:active {
			transform: translateY(0);
			box-shadow: 0 2px 4px rgba(139, 134, 123, 0.08);
		}

		/* 响应式适配：小屏幕优化 */
		@media (max-width: 768px) {
			.pwd-form-container {
				width: 85%;
				padding: 35px 25px;
			}

			.pwd-form-container h3 {
				font-size: 24px;
			}

			.forgot-pwd-form input[type="text"],
			.forgot-pwd-form input[type="submit"] {
				width: 220px;
			}
		}
	</style>
</head>
<body>
<div class="pwd-form-container">
	<h3>找回密码</h3>
	<form action="/users/exec_forghtPwd" method="post" class="forgot-pwd-form">
		<input type="text" name="email" placeholder="请输入邮箱" />
		<input type="submit" value="发送" />
	</form>
</div>
</body>
</html>